<template>
	<view class="order-content">
		<view class="header">
			<!-- #ifdef APP-PLUS -->
			<!-- <view class="appAPPTop" :style="{paddingTop: pagePaddingTop+'px'}"></view> -->
			<!-- #endif -->
			<view class="header-title">
				<view class="icons" @tap="back">
					<u-icon name="arrow-left"></u-icon>
				</view>
				<view class="title">{{'我的订单'}}</view>
				<view class="manage" @tap="chooseType()">
					<text>{{orderTypeCN}}</text>
					<u-icon name="arrow-down"></u-icon>
				</view>
			</view>
			<view class="header-tabs">
				<view class="header-tabs-items" v-for="(item,index) in tabList" :key="index" @click="tabsChange(item)">
					<view :class="['text',tabActive==item.value?'actives':'']">{{item.name}}</view>
				</view>
			</view>
		</view>
		<!-- 课程 -->
		<view class="main" v-if="orderType == 'COURSE_PAY'">
			<view class="items" v-for="(item,index) in dataList">
				<view class="content">
					<view class="status">
						<view class="time">{{item.createTime}}</view>
						<view class="orderType" :class="{red: item.payStatus == 'UNPAID'}">{{item.payStatusWord}}</view>
					</view>
					<view class="detail">
						<view class="desc">
							<view class="title">{{item.cousrName}}</view>
							<view class="orderId">订单号:{{item.sn}}</view>
						</view>
					</view>
				</view>
				<view class="paying">
					<view v-if="item.isCharge == 1" class="paidTotal">
						应付金额: <text><span>￥</span>{{item.unitPrice}}</text>
					</view>
					<view v-else class="paidTotal"><text>免费</text></view>
					<view class="btns">
						<view class="cancels" v-if="item.payStatus=='UNPAID'" @click="handleCancel(item)">取消订单</view>
						<!-- <view class="inPaying" v-if="item.payStatus=='UNPAID'">立即支付</view> -->
						<view class="inPaying" v-if="item.payStatus=='PAID'" @click="handleComment(item)">立即评价</view>
						<!-- <view class="cancels" v-if="item.payStatus=='CANCEL'" @click="handleDel(item)">删除订单</view> -->
					</view>
				</view>
			</view>
			<u-loadmore :status="status" />
		</view>
		<!-- 商品 -->
		<!-- <view v-else class="main">
			<view class="items" v-for="(item,index) in dataList">
				<view class="content">
					<view class="status">
						<view class="shopType">{{item.shop}}</view>
						<view class="orderType">{{item.payStatusWord}}</view>
					</view>
					<view class="detail">
						<image class="imgs" src="../../../static/img/header.jpg" />
						<view class="desc">
							<view class="title">{{item.cousrName}}</view>
							<view class="priceInner">
								<view class="price">￥<text>{{item.num}}</text></view>
								<view class="count">x {{item.num}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="paying">
					<view v-if="item.isCharge == 1" class="paidTotal">
						应付金额: <text><span>￥</span>{{item.unitPrice}}</text>
					</view>
					<view v-else class="paidTotal"><text>免费</text></view>
					<view class="btns">
						<view class="cancels" v-if="item.payStatus=='UNPAID'">取消订单</view>
						<view class="inPaying" v-if="item.payStatus=='UNPAID'">立即支付</view>
						<view class="inPaying" v-if="item.payStatus=='PAID'">立即评价</view>
						<view class="cancels" v-if="item.payStatus=='CANCEL'">删除订单</view>
						<view class="cancels" v-if="item.payStatus=='PAID'">查看物流</view>
						<view class="cancels" v-if="item.payStatus=='DELIVERED-'">确认收货</view>
						<view class="cancels" v-if="item.payStatus=='UNDELIVERED-'">退款/售后</view>
					</view>
				</view>
			</view>
			<u-loadmore :status="status" />
		</view> -->
		<u-popup v-model="showChoose" mode="bottom">
			<view class="popup-box">
				<view class="title">选择类型</view>
				<view class="typeGroup">
					<view v-for="(item, index) in typeList" :key="index" class="radioItem"
						:class="{active: orderType == item.value }" @click="checkboxChange(item)">
						<view class="radioLabel">{{item.name}}</view>
						<u-icon v-if="orderType == item.value" size="50" name="checkmark-circle-fill" />
					</view>
				</view>
			</view>
		</u-popup>
		<u-modal v-model="isDel" title="删除订单" content="是否确认删除订单？" :show-cancel-button="true" @cancel="closeDel"
			@confirm="confirmDel"></u-modal>
		<u-modal v-model="isCen" title="取消订单" content="是否确认取消订单？" :show-cancel-button="true" @cancel="closeCen"
			@confirm="confirmCen"></u-modal>
		<u-popup v-model="isComment" mode="bottom" @close="modalClose">
			<view class="comments-grade">
				<view class="comments-img">
					<img :src="commentsImg.current >= 1 ? commentsImg.selected : commentsImg.slecet" class="img"
						@tap="choose(1)">
					<img :src="commentsImg.current >= 2 ? commentsImg.selected : commentsImg.slecet" class="img"
						@tap="choose(2)">
					<img :src="commentsImg.current >= 3 ? commentsImg.selected : commentsImg.slecet" class="img"
						@tap="choose(3)">
					<img :src="commentsImg.current >= 4 ? commentsImg.selected : commentsImg.slecet" class="img"
						@tap="choose(4)">
					<img :src="commentsImg.current == 5 ? commentsImg.selected : commentsImg.slecet" class="img"
						@tap="choose(5)">
				</view>
				<text>{{choose()}}星好评，课程非常棒！</text>
			</view>
			<view class="commets-input">
				<u-input v-model="commentsVal" :auto-height="true" maxlength="390" :clearable="false" type="textarea"
					placeholder="快来说说学习感受..." />
				<view v-if="commentsImg.src.length" class="add-img-row">
					<view class="add-img-detail" v-for="(item,index) in commentsImg.src" :key="index"
						:style="(index + 1 - 2)%3 == 0 ? 'margin: 12rpx 30rpx' : ''">
						<image :src="item" alt="" class="add"></image>
						<image src="@/static/img/courseBuy/del.png" alt="" class="del" @tap="delImg(index)"></image>
					</view>
				</view>
			</view>
			<view class="comments-input f-row end">
				<!--  <image src="@/static/img/courseBuy/img.png" alt="" @tap="chooseImg"></image> -->
				<view @tap="commentsModal" class="btn_comments">发表评论</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		API
	} from '../../../config/myApi.js';
	export default {
		data() {
			return {
				status: 'loadmore', // 加载更多
				isLastPage: false, // 触底更新
				showChoose: false, //订单类型弹窗
				params: {
					rows: 10,
					page: 1,
					searchStatus: ''
				},
				orderTypeCN: '课程', // 订单类型中文
				orderType: 'COURSE_PAY', //订单类型
				// CANCELLED-已取消 UNPAID-未付款,PAID-已付款,UNDELIVERED-待发货,COMPLETED-已完成,DELIVERED-已发货,
				tabList: [], //标签页列表
				typeList: [{
						name: '课程',
						value: 'COURSE_PAY'
					},
					{
						name: '商品',
						value: 'NORMAL'
					}
				],
				courseTabList: [
					// 课程标签页
					{
						name: '全部',
						value: '',
					},
					{
						name: '待付款',
						value: 'UNPAID'

					},
					{
						name: '已完成',
						value: 'PAID'
					},
					{
						name: '已取消',
						value: 'CANCEL'
					}
				],
				goodsTabList: [
					// 商品标签页
					{
						name: '全部',
						value: ''

					},
					{
						name: '待付款',
						value: 'WAIT_PAY'

					},
					{
						name: '待发货',
						value: 'WAIT_SHIP'

					},
					{
						name: '待收货',
						value: 'WAIT_ROG'

					},
					{
						name: '已完成',
						value: 'COMPLETE'

					},
					{
						name: '已取消',
						value: 'CANCELL'

					}
				],
				tabActive: '', //选中标签页
				dataList: [], //表格列表
				isDel: false, //删除订单弹窗
				isCen: false, //取消订单提示
				handleRow: {}, //操作当前行
				isComment: false, //评价
				//评论输入框内容
				commentsVal: '',
				//评论分数，添加图片评论
				commentsImg: {
					selected: '../../../static/img/courseBuy/collect2.png',
					slecet: '../../../static/img/courseBuy/collect3.png',
					slecet2: '../../../static/img/courseBuy/collect.png',
					current: 4,
					src: [],
				},
			}
		},
		onLoad(option) {
			this.tabActive = option.val;
			this.getDataList();
		},
		// 触底事件
		onReachBottom() {
			if (!this.isLastPage) {
				this.params.pageNumber = this.params.pageNumber + 1;
				this.params.searchStatus = this.tabActive;
				this.getDataList()
			} else {
				this.status = 'nomore';
				this.$u.toast('最后一页');
			}
		},
		methods: {
			/**
			 *  TODO：点开管理，没有没入选中值，
			 * 取消订单等按钮可以通过状态去判断是否显示或显示内容
			 * 课程
			 */
			chooseType() {
				this.showChoose = !this.showChoose
			},
			back() {
				uni.switchTab({
					url: '/pages/tabbar/user/my'
				})
			},
			// 选择标签页
			tabsChange(e) {
				this.tabActive = e.value;
				this.getDataList()
			},
			//发表评论
			commentsModal() {
				let params = {
					courseSeriesId: this.handleRow.id,
					evaluateType: 0,
					grade: this.commentsImg.current,
					pid: 0,
					userEvaluate: this.commentsVal
				}
				API.answerComment(params).then(res => {
					if (res.success) {
						uni.showToast({
							title: '评价成功',
							icon: 'none'
						})
						this.commentsVal = "";
						this.isComment = false
					}
				})
			},
			// 选择类型
			checkboxChange(v) {
				this.orderType = v.value;
				this.tabActive = "";
				this.showChoose = false;
				if (v.value == 'COURSE_PAY') {
					this.orderTypeCN = '课程';
					this.tabList = this.courseTabList;
				} else {
					this.orderTypeCN = '商品';
					this.dataList = this.goodsList;
				}
				this.getDataList();
			},
			// 打开取消课程
			handleCancel(v) {
				this.handleRow = v;
				this.isCen = true;
			},
			// 关闭取消课程
			closeCen() {
				this.isCen = false;
				console.log('关闭取消订单')
			},
			// 确认取消课程
			confirmCen() {
				API.delOrder(this.handleRow.id).then(res => {
					if (res.success) {
						this.isCen = false;
						this.$u.toast("取消成功");
						this.getDataList();
					}
				})
			},
			// 打开删除课程
			handleDel(v) {
				this.handleRow = v;
				this.isDel = true;
			},
			// 关闭删除课程
			closeDel() {
				this.isDel = false;
				console.log('关闭删除订单')
			},
			// 确认删除课程
			confirmDel() {
				this.isDel = false;
				console.log("确认删除订单")
			},
			// 打开评论
			handleComment(v) {
				this.handleRow = v;
				this.isComment = true;
			},
			//评论分数的显示
			choose(num) {
				if (num) {
					this.commentsImg.current = num;
				}
				if (this.commentsImg.current == 1) {
					return "一"
				} else if (this.commentsImg.current == 2) {
					return "二"
				} else if (this.commentsImg.current == 3) {
					return "三"
				} else if (this.commentsImg.current == 4) {
					return "四"
				} else if (this.commentsImg.current == 5) {
					return "五"
				}
			},
			// 获取订单 
			getDataList() {
				let pram = {
					rows: 10,
					page: 1,
					searchStatus: this.tabActive,
				};
				if (this.orderType == 'NORMAL') {
					this.tabList = this.goodsTabList;
				} else {
					this.tabList = this.courseTabList;
				}
				API.getOrder(pram).then(res => {
					if (res.code == 200) {
						let list = res.result.records;
						if (list.length == res.result.total) {
							this.isLastPage = true;
						}
						list.forEach(i => {
							// CANCELLED-已取消 UNPAID-未付款,PAID-已付款,UNDELIVERED-待发货,
							// COMPLETED-已完成,DELIVERED-已发货,
							// if (i.payStatus == 'PAID') i.payStatusWord = '已付款';
							// if (i.payStatus == 'UNPAID') i.payStatusWord = '未付款';
							// if (i.payStatus == 'UNDELIVERED') i.payStatusWord = '待发货';
							// if (i.payStatus == 'DELIVERED') i.payStatusWord = '已发货';
							// if (i.payStatus == 'COMPLETED') i.payStatusWord = '已完成';
							// if (i.payStatus == 'CANCELLED') i.payStatusWord = '已取消';
							if (i.payStatus == 'UNPAID') i.payStatusWord = '待支付';
							if (i.payStatus == 'PAID') i.payStatusWord = '已完成';
							if (i.payStatus == 'CANCEL') i.payStatusWord = '已取消';
						})
						console.log('结果中文：', list)
						this.dataList = list;
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '../ascss/orderIndex.scss';
</style>
